<template>
  <div class="futures-contract">
    <a-select v-model="contract" :placeholder="placeholder" @change="change">
      <a-select-option
        v-for="(item, idx) in options"
        :value="item.futuresContract"
        :key="idx"
      >
        {{ item.futuresContract }}
      </a-select-option>
    </a-select>
  </div>
</template>

<script>
import { getFuturesByCode } from "@/api/resource";

export default {
  props: {
    value: {
      type: String
    },
    // 期货合约
    futuresCode: {
      type: String,
      default: undefined
    },
    // 占位符
    placeholder: {
      type: String,
      default: "请选择合约月"
    },
    // 过滤的合约月id
    filterList: {
      type: Array,
      default: () => {
        return [];
      }
    }
  },
  data() {
    return {
      options: []
    };
  },
  computed: {
    contract: {
      get() {
        return this.value;
      },
      set(n) {
        this.$emit("input", n);
      }
    }
  },
  watch: {
    futuresCode() {
      this.getFutures();
    }
  },
  methods: {
    change(val) {
      this.$emit("change", val);
    },
    // 获取合约月列表
    getFutures() {
      if (this.futuresCode && this.futuresCode.length !== 0) {
        getFuturesByCode({
          futuresCode: this.futuresCode
        }).then(res => {
          this.options = res.filter(
            item => this.filterList.indexOf(item.futuresContract) === -1
          );
        });
      }
    }
  },
  created() {
    this.getFutures();
  }
};
</script>
